<template>
  <div class='gdbzqk'>
    <div id='echartsGdxzbzqk' />
    <!-- <div id="echartsGdsybzqk" /> -->
  </div>
</template>

<script>
export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },
  data() {
    const self = this
    return {
      IntervalNum: 1,
      echartsGdxzbzqk: null,
      echartsGdsybzqk: null,
      optionXz: {
        title: {
          text: '各地行政编制情况',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            let newParams = []
            newParams = [...params]
            const tooltipString = [newParams[0].name + '<br>']
            newParams.sort((a, b) => {
              return b.value - a.value
            })
            newParams.forEach((p) => {
              const cont =
                p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>'
              tooltipString.push(cont)
            })

            return tooltipString.join('')
          }
        },
        toolbox: {
          right: '25%',
          itemGap: 40,
          show: true,
          itemSize: 22,
          feature: {
            myTool1: {
              show: true,
              title: '行政',
              icon: 'path://M512 283.927273c-27.927273 0-41.890909 18.618182-41.890909 41.890909s18.618182 41.890909 41.890909 41.890909 41.890909-18.618182 41.890909-41.890909-18.618182-41.890909-41.890909-41.890909z,M512 0C228.072727 0 0 228.072727 0 512s228.072727 512 512 512 512-228.072727 512-512S795.927273 0 512 0z m311.854545 800.581818H200.145455v-23.272727h623.70909v23.272727z m-572.50909-325.818182v-23.272727H372.363636v23.272727h-23.272727V698.181818H274.618182v-223.418182h-23.272727z m544.581818 251.345455v23.272727H223.418182v-23.272727h572.509091z m-344.436364-251.345455v-23.272727h121.018182v27.927273h-23.272727v223.418182l-74.472728-4.654546v-223.418182h-23.272727z m195.490909 0v-23.272727h125.672727v27.927273h-23.272727v223.418182l-79.127273-4.654546v-223.418182h-23.272727z m167.563637-46.545454H214.109091c-18.618182-9.309091-18.618182-23.272727 0-27.927273 9.309091-9.309091 214.109091-158.254545 279.272727-204.8 9.309091-9.309091 27.927273-9.309091 37.236364 0 65.163636 46.545455 269.963636 195.490909 283.927273 204.8 13.963636 9.309091 13.963636 23.272727 0 27.927273z',
              iconStyle: {
                normal: {
                  color: '#707070',
                  borderWidth: 0
                }
              },
              onclick: function() {
                self.callback('xz', 1)
              }
            },
            myTool2: {
              show: true,
              title: '事业',
              icon: 'path://M537.429333 24.746667c-9.386667-0.512-18.090667-0.853333-25.770666-0.853334-205.994667 0-380.416 153.770667-405.674667 357.546667-12.458667 100.010667 12.629333 200.704 70.656 283.648 57.856 82.602667 143.530667 140.8 241.322667 163.84l10.069333 2.389333 83.968 145.066667 83.968-145.066667 10.069333-2.389333c89.088-20.992 169.472-71.850667 226.474667-143.530667 57.173333-71.850667 88.746667-161.792 88.746667-253.44 0-215.04-168.618667-393.898667-383.829334-407.210666z,M538.794667 0.853333c-8.874667-0.512-18.090667-0.853333-27.136-0.853333C293.717333 0 109.056 162.645333 82.261333 378.538667c-27.306667 219.306667 116.565333 423.424 330.24 473.6l62.634667 108.202666 36.864 63.658667 36.864-63.658667 62.634667-108.202666C805.888 806.4 945.152 632.832 945.152 431.957333 945.152 204.288 766.805333 15.018667 538.794667 0.853333z m67.242666 828.074667l-10.069333 2.389333-83.968 145.066667-83.968-145.066667-10.069333-2.389333c-97.792-23.04-183.466667-81.066667-241.322667-163.84-58.026667-82.944-83.114667-183.637333-70.656-283.648C131.242667 177.664 305.664 23.893333 511.658667 23.893333c7.68 0 16.384 0.341333 25.770666 0.853334 215.210667 13.312 383.829333 192.341333 383.829334 407.210666 0 91.477333-31.573333 181.589333-88.746667 253.44-57.002667 71.509333-137.386667 122.538667-226.474667 143.530667z,M389.802667 600.064c2.218667-7.509333 4.949333-15.018667 7.338666-22.698667l7.168-22.016 7.338667-22.698666 6.997333-22.186667 7.338667-22.528 7.168-22.357333c-10.922667-8.362667-22.186667-16.042667-33.109333-24.234667L367.274667 417.621333l-33.109334-24.064-32.768-23.893333h163.498667c2.730667-7.338667 5.12-16.042667 7.509333-23.381333l7.338667-22.528 6.997333-22.186667 7.338667-22.528 6.997333-22.186667 7.338667-22.528 7.168-22.016s9.898667 27.136 13.994667 39.594667l24.746666 76.288 11.093334 34.133333 2.389333 6.997334H732.501333L599.381333 465.92l6.826667 21.674667 7.338667 22.528 6.997333 22.186666c2.389333 7.509333 4.949333 15.018667 7.338667 22.528l7.168 22.186667 7.338666 22.528c2.389333 7.338667 4.778667 14.677333 7.168 22.357333 0 0-23.381333-15.701333-33.28-23.04l-90.453333-65.706666c-3.072-2.218667-6.656-4.437333-10.069333-6.656-1.024 0.682667-130.901333 95.573333-132.949334 96.085333 2.048-7.850667 4.778667-15.018667 6.997334-22.528z',
              iconStyle: {
                normal: {
                  color: '#707070',
                  borderWidth: 0
                }
              },
              onclick: function() {
                self.callback('sy', 2)
              }
            }
          }
        },
        legend: {
          left: 'right',
          textStyle: {
            color: '#fff'
          },
          icon: 'circle'
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#fff'
            }
          },
          data: [
            '自治区直属',
            '南宁市',
            '柳州市',
            '桂林市',
            '梧州市',
            '北海市',
            '防城港市',
            '钦州市',
            '贵港市',
            '玉林市',
            '百色市',
            '贺州市',
            '河池市',
            '来宾市',
            '崇左市'
          ]
        },
        yAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: { show: false },
          axisLine: { show: false }
        },
        series: [
          {
            name: '编制数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            realtimeSort: true,
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              11984, 18564, 15215, 14658, 15268, 14168, 16485, 16528, 16482,
              18425, 15421, 14859, 19875, 15428, 16548
            ]
          },
          {
            name: '实有数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              10000, 17000, 14000, 13000, 14000, 13000, 15000, 16000, 15000,
              18000, 15000, 14000, 18000, 14000, 15000
            ]
          },
          {
            name: '空编数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              1000, 1000, 1000, 1000, 1000, 1000, 1000, 200, 1000, 1000, 400,
              100, 1000, 1000, 1000
            ]
          },
          {
            name: '待分配数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              100, 110, 120, 261, 156, 276, 176, 115, 100, 182, 146, 113, 110,
              120, 200
            ]
          }
        ]
      },
      optionSy: {
        title: {
          text: '各地事业编制情况',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          // orient: 'horizontal',
          left: 'right',
          textStyle: {
            color: '#fff'
          },
          icon: 'circle'
        },
        grid: {
          top: '15%',
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          splitLine: { show: false },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#fff'
            }
          },
          data: [
            '自治区直属',
            '南宁市',
            '柳州市',
            '桂林市',
            '梧州市',
            '北海市',
            '防城港市',
            '钦州市',
            '贵港市',
            '玉林市',
            '百色市',
            '贺州市',
            '河池市',
            '来宾市',
            '崇左市'
          ]
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#7ec7ff'
            }
          }
        },
        series: [
          {
            name: '编制数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            realtimeSort: true,
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              31984, 28564, 35215, 24658, 15268, 54168, 26485, 46528, 56482,
              68425, 35421, 64859, 39875, 15428, 26548
            ]
          },
          {
            name: '实有数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              30000, 20000, 30000, 20000, 10000, 50000, 20000, 40000, 50000,
              60000, 30000, 60000, 30000, 10000, 20000
            ]
          },
          {
            name: '空编数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              1984, 8564, 5215, 4658, 5268, 4168, 6485, 6528, 6482, 8425, 5421,
              4859, 9875, 5428, 6548
            ]
          },
          {
            name: '待分配数',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: true,
              position: 'top',
              rotate: 45,
              color: '#fff'
            },
            data: [
              100, 110, 120, 261, 156, 276, 176, 115, 100, 182, 146, 113, 110,
              120, 200
            ]
          }
        ]
      },
      depcode: '450000-00-0000'
    }
  },

  // watch: {
  //   dep_code(newValue, oldValue) {
  //     if (newValue) {
  //       (this.depcode = newValue), this.getGdbzqk()
  //     }
  //   }
  // },
  mounted() {
    this.initEchartsGdbzqk()
    this.setTime()
  },
  destroyed() {
    window.onresize = null
  },
  beforeDestroy() {
    // 页面关闭时清除定时器
    clearInterval(this.timer)
  },
  methods: {
    setTime() {
      // 设置定时器
      this.timer = setInterval(() => {
        if (this.IntervalNum % 2 == 0) {
          this.initEchartsGdbzqk('xz')
        } else if (this.IntervalNum % 2 == 1) {
          this.ycc = '各地超职数情况'
          this.initEchartsGdbzqk('sy')
        }
        if (this.IntervalNum == 1) {
          this.IntervalNum = 0
        } else {
          this.IntervalNum++
        }
      }, 5000)
    },

    clearTime() {
      // 清除定时器
      clearInterval(this.timer)
    },
    callback(val, num) {
      clearInterval(this.timer)
      // this.clearTime()
      // this.setTime()
      this.initEchartsGdbzqk(val)
    },
    initEchartsGdbzqk(val) {
      if (val == 'xz') {
        this.optionXz.toolbox.feature.myTool1.iconStyle.normal.color = '#00BFFF'
        this.optionXz.title.text = '各地行政编制情况'
      } else {
        this.optionXz.toolbox.feature.myTool2.iconStyle.normal.color = 'pink'
        this.optionXz.series[0].data = [
          31984, 28564, 35215, 24658, 15268, 54168, 26485, 46528, 56482, 68425,
          35421, 64859, 39875, 15428, 26548
        ]
        this.optionXz.series[1].data = [
          30000, 20000, 30000, 20000, 10000, 50000, 20000, 40000, 50000, 60000,
          30000, 60000, 30000, 10000, 20000
        ]
        this.optionXz.series[2].data = [
          1984, 8564, 5215, 4658, 5268, 4168, 6485, 6528, 6482, 8425, 5421,
          4859, 9875, 5428, 6548
        ]
        this.optionXz.series[3].data = [
          100, 110, 120, 261, 156, 276, 176, 115, 100, 182, 146, 113, 110, 120,
          200
        ]
        this.optionXz.title.text = '各地事业编制情况'
      }
      this.echartsGdxzbzqk = this.$echarts.init(
        document.getElementById('echartsGdxzbzqk')
      )
      this.echartsGdxzbzqk.setOption(this.optionXz)
      // 重置option属性
      this.optionXz = this.$options.data.call(this).optionXz
      // this.echartsGdsybzqk = this.$echarts.init(
      //   document.getElementById('echartsGdsybzqk')
      // )
      // this.echartsGdsybzqk.setOption(this.optionSy)
      // -----------------------------------------------------------------
      //响应式变化
      window.addEventListener(
        'resize',
        () => this.echartsGdxzbzqk.resize(),
        false
      )
    }
  }
}
</script>
<style lang='scss' scoped>
.gdbzqk {
  width: 150%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  // background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;
  float: right;

  #echartsGdxzbzqk {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #echartsGdsybzqk {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
